import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

import diyDemo from '../views/study1/diyDemo.vue'
import diyDemo2 from '../views/study1/diyDemo2.vue'
import diyDemo3 from '../views/study1/diyDemo3.vue'
import diyDemo4 from '../views/study1/diyDemo4'
import diyDemo5 from '@/views/study1/diyDemo5.vue'
import diyDemo6 from '@/views/study1/diyDemo6.vue'

import diyDemo21 from '@/views/study2/diyDemo1.vue'
import diyDemo22 from '@/views/study2/diyDemo2.vue'
import diyDemo23 from '@/views/study2/diyDemo3.vue'
import diyDemo24 from '@/views/study2/diyDemo4.vue'
import diyDemo25 from '@/views/study2/diyDemo5.vue'
import diyDemo26 from '@/views/study2/diyDemo6.vue'

import diyDemo31 from '@/views/study3/diyDemo1.vue'
import diyDemo32 from '@/views/study3/diyDemo2.vue'
import diyDemo33 from '@/views/study3/diyDemo3.vue'
import diyDemo34 from '@/views/study3/diyDemo4.vue'
import diyDemo35 from '@/views/study3/diyDemo5.vue'
import diyDemo36 from '@/views/study3/diyDemo6.vue'
import diyDemo37 from '@/views/study3/diyDemo7.vue'
import diyDemo38 from '@/views/study3/diyDemo8.vue'
import diyDemo39 from '@/views/study3/diyDemo9.vue'
import diyDemo310 from '@/views/study3/diyDemo10.vue'

import diyDemo313 from '@/views/study3/diyDemo13.vue'
import diyDemo314 from '@/views/study3/diyDemo14.vue'
import diyDemo315 from '@/views/study3/diyDemo15.vue'
import diyDemo316 from '@/views/study3/diyDemo16.vue'
import diyDmeo317 from '@/views/study3/diyDmeo17.vue'

// study4
import diyDemo41 from '@/views/study4/diyDemo1.vue'
import diyDemo42 from '@/views/study4/diyDemo2.vue'
import diyDemo43 from '@/views/study4/diyDemo3.vue'
import diyDemo44 from '@/views/study4/diyDemo4.vue'
import diyDemo45 from '@/views/study4/diyDemo5.vue'

import example1 from '@/views/study4/example1.vue'
import example2 from '@/views/study4/example2.vue'
import example3 from '@/views/study4/example3.vue'

// study5
import diyDemo51 from '@/views/study5/diyDemo1.vue'
import diyDemo52 from '@/views/study5/diyDemo2.vue'
import diyDemo53 from '@/views/study5/diyDemo3.vue'

// study6
import diyDemo61 from '@/views/study6/Demo1.vue'
import diyDemo62 from '@/views/study6/Demo2.vue'
import diyDemo611 from '@/views/study6/NavigatorOne/Option1.vue'
import diyDemo612 from '@/views/study6/NavigatorOne/Option2.vue'
import login from '@/views/study6/login.vue'

// studyDemo
import studyDemo1 from '@/views/studyDemo/demo1.vue'
import studyDemo2 from '@/views/studyDemo/demo2.vue'
import studyDemo3 from '@/views/studyDemo/demo3.vue'
import studyDemo4 from '@/views/studyDemo/demo4.vue'

// mytest
import test1 from '@/views/mytest/test1.vue'
import test2 from '@/views/mytest/test2.vue'
import test3 from '@/views/mytest/test3.vue'

// mytest2
import test21 from '@/views/mytest2/test1.vue'
import test22 from '@/views/mytest2/test2.vue'
import test23 from '@/views/mytest2/test3.vue'

// studyrouter
import srDemo1 from '@/views/studyrouter/demo1.vue'

// studyrouter-children
import srDetail1 from '@/views/studyrouter/sdchildren/detail1.vue'
import srDetail2 from '@/views/studyrouter/sdchildren/detail2.vue'

// study1
const study1Routers = [
  {
    path: '/studemo',
    name: 'studemo',
    component: diyDemo
  },
  {
    path: '/studemo2',
    name: 'studemo2',
    component: diyDemo2
  },
  {
    path: '/studemo3',
    // name: 'studemo3',
    name: 'studemo3Name',
    component: diyDemo3
  },
  {
    path: '/studemo4',
    name: 'studemo4',
    component: diyDemo4
  },
  {
    path: '/studemo5',
    name: '/studemo5',
    component: diyDemo5
  },
  {
    path: '/studemo6',
    name: '/studemo6',
    component: diyDemo6
  }
]

// study2
const study2Routers = [
  {
    path: '/studemo21',
    name: '/studemo21',
    component: diyDemo21
  },
  {
    path: '/studemo22',
    name: '/studemo22',
    component: diyDemo22
  },
  {
    path: '/studemo23',
    name: '/studemo23',
    component: diyDemo23
  },
  {
    path: '/studemo24',
    name: '/studemo24',
    component: diyDemo24
  },
  {
    path: '/studemo25',
    name: '/studemo25',
    component: diyDemo25
  },
  {
    path: '/studemo26',
    name: '/studemo26',
    component: diyDemo26
  }
]
// study3
const study3Routers = [
  {
    path: '/studemo31',
    name: '/studemo31',
    component: diyDemo31
  },
  {
    path: '/studemo32',
    name: '/studemo32',
    component: diyDemo32
  },
  {
    path: '/studemo33',
    name: '/studemo33',
    component: diyDemo33
  },
  {
    path: '/studemo34',
    name: '/studemo34',
    component: diyDemo34
  },
  {
    path: '/studemo35',
    name: '/studemo35',
    component: diyDemo35
  },
  {
    path: '/studemo36',
    name: '/studemo36',
    component: diyDemo36
  },
  {
    path: '/studemo37',
    name: '/studemo37',
    component: diyDemo37
  },
  {
    path: '/studemo38',
    name: '/studemo38',
    component: diyDemo38
  },
  {
    path: '/studemo39',
    name: '/studemo39',
    component: diyDemo39
  },
  {
    path: '/studemo310',
    name: '/studemo310',
    component: diyDemo310
  },

  {
    path: '/studemo313',
    name: '/studemo313',
    component: diyDemo313
  },
  {
    path: '/studemo314',
    name: '/studemo314',
    component: diyDemo314
  },
  {
    path: '/studemo315',
    name: '/studemo315',
    component: diyDemo315
  },
  {
    path: '/studemo316',
    name: '/studemo316',
    component: diyDemo316
  },
  {
    path: '/studemo317',
    name: '/studemo317',
    component: diyDmeo317
  }
]
// study4
const study4Routers = [
  {
    path: '/studemo41',
    name: '/studemo41',
    component: diyDemo41
  },
  {
    path: '/studemo42',
    name: '/studemo42',
    component: diyDemo42
  },
  {
    path: '/studemo43',
    name: '/studemo43',
    component: diyDemo43
  },
  {
    path: '/studemo44',
    name: '/studemo44',
    component: diyDemo44
  },
  {
    path: '/studemo45',
    name: '/studemo45',
    component: diyDemo45
  },

  {
    path: '/example1',
    name: '/example1',
    component: example1
  },
  {
    path: '/example2',
    name: '/example2',
    component: example2
  },
  {
    path: '/example3',
    name: '/example3',
    component: example3
  }
]

// study5
const study5Routers = [
  {
    path: '/studemo51',
    name: '/studemo51',
    component: diyDemo51
  },
  {
    path: '/studemo52',
    name: '/studemo52',
    component: diyDemo52
  },
  {
    path: '/studemo53',
    name: '/studemo53',
    component: diyDemo53
  }
]
// study6
const study6Routers = [
  {
    path: '/studemo61',
    name: '/studemo61',
    component: diyDemo61,
    meta: { title: 'ElementUI' }
  },
  {
    path: '/studemo62',
    name: '/studemo62',
    component: diyDemo62,
    meta: { title: '系统管理' },
    children: [
      {
        name: 'userManage',
        path: 'user',
        component: diyDemo611,
        meta: { title: '用户管理' }
      },
      {
        name: 'roleManage',
        path: 'role',
        component: diyDemo612,
        meta: { title: '角色管理' }
      }
    ]
  },
  // {
  //   path: '/login',
  //   name: 'login',
  //   component: login
  // },
]

// studyDemo
const studyDemoRouters = [
  {
    path: '/studyDemo1',
    name: '/studyDemo1',
    component: studyDemo1
  },
  {
    path: '/studyDemo2',
    name: '/studyDemo2',
    component: studyDemo2
  },
  {
    path: '/studyDemo3',
    name: '/studyDemo3',
    component: studyDemo3
  },
  {
    path: '/studyDemo4',
    name: '/studyDemo4',
    component: studyDemo4
  }
]

// mytest
const mytestRouters = [
  {
    path: '/test1',
    name: '/test1',
    component: test1
  },
  {
    path: '/test2',
    name: '/test2',
    component: test2
  },
  {
    path: '/test3',
    name: '/test3',
    component: test3
  }
]

// mytest2
const mytest2Routers = [
  {
    path: '/test21',
    name: '/test21',
    component: test21
  },
  {
    path: '/test22',
    name: '/test22',
    component: test22
  },
  {
    path: '/test23',
    name: '/test23',
    component: test23
  }
]

// studyRouters
const studyRouters = [
  {
    name: 'srdemo1',
    path: '/srdemo1',
    component: srDemo1,
    title: '嵌套路由',
    // redirect: '/', // 重定向
    children: [
      {
        name: 'xiang1',
        path: 'detail1',
        component: srDetail1
      },
      {
        name: 'xiang2',
        path: 'detail2/:title/:content', // params传参在规则中占位，且必须使用 name 配置项
        component: srDetail2,
        props: true // 路由的props配置，且只能在params传参时配置
      },
      {
        name: 'defaultp',
        path: 'user/:id',
        components: { default: srDetail1, sidebar: srDetail2 },
        props: { default: true, sidebar: false }
      }
    ]
  }
]

export const routesList = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    meta: { title: '首页' }
  },
  // {
  //   path: '/about',
  //   name: 'about',
  //   component: () => import('../views/AboutView.vue')
  // },

  ...study6Routers,
  // ...study1Routers,
  // ...study2Routers,
  // ...study3Routers,
  // ...study4Routers,
  // ...study5Routers,
  ...studyDemoRouters,
  ...mytestRouters,
  ...mytest2Routers,
  // ...studyRouters
]

// 创建路由
const router = createRouter({
  // history: createWebHistory(import.meta.env.BASE_URL),

  // history: createWebHistory(),   // history 模式
  history: createWebHashHistory(), // hash 模式
  routes: routesList
})

export default router
